<template>
  <div class="goods-detail">
    <div class="detail-content">
      <!-- 文章 -->
        <div>
          <div class="pad-t-6 pad-b-6">
            <div v-if="contentDetail.content" class="richArea" v-html="contentDetail.content" />
          </div>
        </div>
        <!-- 图片 -->
        <!-- <div v-if="item.type === 'image'" :style="'background:' + item.style.backColor">
          <div :style="'padding: '+ item.style.upperLowerMargins+'px '+ item.style.sideMargin+'px;'">
            <el-image
              v-if="item.src"
              class="picture-bar"
              :src="item.src"
              lazy
            />
          </div>
        </div> -->
        <!-- 视频 -->
        <!-- <div v-if="item.type === 'video'">
          <video
            :src="item.shareArticleVideoDTO.videoUrl"
            :poster="item.shareArticleVideoDTO.videoImg"
            class="video"
            :class="'video-w-' + item.shareArticleVideoDTO.videoStyle"
            controls="controls"
          />
        </div> -->
      <!-- <div v-for="(item, index) in goodsContent" :key="index">
        
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import demopic from '@/assets/images/uploads/pic-5.png'
export default defineComponent({
  name: 'GoodsDetail',
  props: {
      contentDetail: Object
    },
  setup(props, content) {
    onMounted(() => {})

    return {
      demopic
    }
  }
})
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $detailWidth: 100%;
  $recommendGoodsWidth: 190px;

  .goods-detail{
    font-size: 16px;
    .detail-content{
      width: $detailWidth;
      box-sizing: border-box;
      .el-image{
        margin-bottom: -4px;
      }
      .video{
        &.video-w-1{
          width: $detailWidth;
          height: 421px;
        }
        &.video-w-2{
          width: $detailWidth;
          height: 562px;
        }
        &.video-w-3{
          width: $detailWidth;
          height: 750px;
        }
        // &.video-w-1{
        //   width: 500px;
        //   height: 218px;
        // }
        // &.video-w-2{
        //   width: 500px;
        //   height: 375px;
        // }
        // &.video-w-3{
        //   width: 500px;
        //   height: 500px;
        // }
      }
    }
  }
</style>
